import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
/* plugins */
import VueMacros from "unplugin-vue-macros/vite";
import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import Modules from "vite-plugin-use-modules";
import vueJsx from "@vitejs/plugin-vue-jsx";
import Unocss from "unocss/vite";
import Commonjs from "vite-plugin-commonjs";
import svgLoader from "vite-svg-loader";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import path from "path";
import PreprocessorDirectives from "unplugin-preprocessor-directives/vite";

export default defineConfig(() => {
  return {
    resolve: {
      extensions: [".js", ".vue", ".jsx", ".json"],
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
                          @use "@/styles/variables.scss" as *;
                          @use "@/styles/mixin.scss" as *;`,
        },
      },
    },
    server: {
      port: 7030,
      strictPort: false,
      open: false,
      proxy: {
        "/api": {
          target: "http://localhost:5001/api",
          changeOrigin: true,
          ws: true,
          rewrite: (path) => path.replace(new RegExp(`^/api`), ""),
        },
      },
      host: "0.0.0.0",
    },
    plugins: [
      vueJsx(),
      VueMacros({
        plugins: {
          vue: vue(),
        },
      }),
      AutoImport({
        imports: ["vue"],
        resolvers: [
          ElementPlusResolver(),
          IconsResolver({
            prefix: "Icon",
          }),
        ],
      }),
      Components({
        resolvers: [
          ElementPlusResolver(),
          IconsResolver({
            enabledCollections: ["ep"],
          }),
        ],
      }),
      Unocss(),
      Commonjs(),
      Icons({
        autoInstall: true,
      }),
      svgLoader(),
      Modules(),
      PreprocessorDirectives(),
    ],
    build: {
      cssCodeSplit: true,
      emptyOutDir: true,
      sourcemap: false,
      assetsDir: "assets",
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes("node_modules")) {
              if (id.includes("xgplayer")) {
                return "xgplayer";
              }
              if (id.includes("lodash")) {
                return "lodash";
              }
              if (id.includes("axios")) {
                return "axios";
              }
              if (id.includes("mathjs")) {
                // 拆分 mathjs 的不同部分
                if (id.includes("mathjs/lib/esm/expression")) {
                  return "mathjs-expression";
                }
                if (id.includes("mathjs/lib/esm/function")) {
                  return "mathjs-function";
                }
                return "mathjs";
              }
              if (id.includes("element-plus")) {
                // 拆分 element-plus 的不同部分
                if (id.includes("element-plus/es/components/date-picker")) {
                  return "element-plus-date-picker";
                }
                if (id.includes("element-plus/es/components/table")) {
                  return "element-plus-table";
                }
                return "element-plus";
              }
              return "vendor"; // 将剩余的 node_modules 包拆分到 vendor chunk 中
            }
          },
        },
      },
    },
  };
});
